<template>
    <div class="content" v-loading="loading">
      <div class="title">
        <p>选择配置</p>
      </div>
      <div class="header">
        <div class="tools">
            <el-form :inline="true" :model="form" class="demo-form-inline">
              <el-form-item :label="$t('message.global.group') + ':'">
                <el-input v-model="form.group" :placeholder="$t('message.global.group')"></el-input>
              </el-form-item>

              <el-form-item :label="$t('message.global.unit') + ':'">
                <el-input v-model="form.unit" :placeholder="$t('message.global.unit')"></el-input>
              </el-form-item>

              <el-form-item :label="$t('message.global.version') + ':'">
                <el-input v-model="form.version" :placeholder="$t('message.global.version')"></el-input>
              </el-form-item>

              <el-form-item :label="$t('message.global.profile') + ':'">
                <el-input v-model="form.profile" :placeholder="$t('message.global.profile')"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="loadData" icon="el-icon-search">{{$t('message.global.search')}}</el-button>
              </el-form-item>
            </el-form>
        </div>
      </div>

      <div class="body">
        <div>
          <el-card class="box-card">
            <el-table
              :data="tableData"
              stripe
              style="width: 100%">

              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="单元描述">
                      <span>{{ props.row.unitDescription }}</span>
                    </el-form-item>
                    <el-form-item label="版本描述">
                      <span>{{ props.row.versionDescription }}</span>
                    </el-form-item>

                  </el-form>
                </template>
              </el-table-column>

              <el-table-column
                prop="group"
                :label="$t('message.global.group')">
              </el-table-column>
              <el-table-column
                prop="unit"
                :label="$t('message.global.unit')">
              </el-table-column>
              <el-table-column
                prop="version"
                :label="$t('message.global.version')">
              </el-table-column>
              <el-table-column
                prop="profile"
                :label="$t('message.global.profile')">
              </el-table-column>

              <el-table-column
                prop="updateTime"
                :label="$t('message.global.updateTime')">
              </el-table-column>

              <el-table-column :label="$t('message.global.showDetail')">
                <template slot-scope="scope">
                  <el-button
                    size="mini" @click="showDetail(scope.row)" icon="el-icon-more-outline">{{$t('message.global.showVersion')}}</el-button>
                </template>
              </el-table-column>

              <el-table-column :label="$t('message.global.select')">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    icon="el-icon-check"
                    type="primary"
                    :disabled="enableSelect(scope.row)"
                    v-if="scope.row.versionId != versionId"
                    @click="selectConfig(scope.row)">{{$t('message.global.select')}}</el-button>
                </template>
              </el-table-column>

            </el-table>
          </el-card>
        </div>

        <div class="page-util">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="index"
            :page-sizes="[10]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>

        </div>
      </div>
    </div>
</template>

<script>
    import AddUnitForm from "../component/AddUnitForm.vue";

    export default {
      components: {AddUnitForm},
      name: "select-config",
        data : function(){
          return {
            form : {
              group : "",
              unit : "",
              version : "",
              profile : "",
            },
            tableData : [],
            selectIds : [],//chosed ids
            size : 10,
            index : 1,
            total : 0,
            addDialogVisiable : false, //new dialog is visiable
            loading : false, //request add unit loading
          }
        },
        methods : {
          init : function () {
            this.loadSelected().then(() => this.loadData());
          },
          loadData : function(){
            this.loading = true;
            this.form["index"] = this.index;
            this.form["size"] = this.size;
            this.$get("/config/listUnitVersion",this.form).then(data => (this.tableData = data.data,this.total=data.count,this.loading = false),() => (this.loading = false));
          },

          loadSelected : function () {
            //load the selected config version id
            var that = this;
            var p = new Promise(function(resolve, reject){
              that.$get("/dependency/getDependencyVersionId",{versionId : that.versionId}).then((data) => {that.selectIds = data,resolve()});
            });
            return p;
          },

          enableSelect : function (row) {
            //if the config is selected, it while be can't selected
            for(var i = 0 ; i < this.selectIds.length ; i++){
              if(row.versionId == this.selectIds[i]){
                return true;
                break;
              }
            }
            return false;
          },

          handleSizeChange(value){
            this.size = value;
            this.index = 1;
            this.loadData();
          },
          handleCurrentChange(value){
            this.index = value;
          },
          showDetail(row){
            var versionId = row.versionId;
            var group = row.group;
            var unit = row.unit;
            var version = row.version;
            var profile = row.profile;
            this.$router.push("/configDetails?group=" + group + "&unit=" + unit + "&version=" + version + "&profile=" + profile + "&versionId=" + versionId)
          },
          selectConfig(row){
            this.loading = true;
            var dependencyId = row.versionId;
            this.$post('/dependency/addDependency?versionId=' + this.versionId + "&dependencyId=" + dependencyId).then(code => {
              this.loading = false;
              if(code == 0){
                //success
                this.selectIds.push(row.versionId);
                this.$message.success(this.$t('message.config.addDependencySuccess'));
              }else if(code == 1){
                //exist
                this.$message.warning(this.$t('message.config.dependencyExist'));
              }else if(code == 2){
                //equals
                this.$message.warning(this.$t('message.config.versionAndDependencyEquals'));
              }
            },() => (this.loading = false));
          }
        },
        watch : {
          index : function () {
            this.loadData();
          }
        },
        mounted : function(){
          this.versionId = this.$route.query.versionId;
          this.init();
        },
        props : {

        }
    }
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

<style scoped>
  .title{margin-bottom: 10px;}
  .title p{text-align: center;font-size: 20px;}
  .content{width:99%;margin:0 auto;}
  .header{margin-bottom: 2rem;}
  .tools{background-color: #f5f7fa;padding:10px 20px 10px 20px;border:1px solid #bbb1b1;border-radius:5px;display: flex;justify-content: space-between;}
  .el-form-item{margin-bottom: 0;}
  .page-util{margin:1rem;display: flex;flex-direction: row-reverse;}
</style>
